<template>
    <dv-border-box1>
        <div class="title">警情日报</div>
        <i class="iconfont icon-qita SelfIcon" @click="opendiia"></i>
        <veEcharts :option="option1" ref="warnChart" />
        <policeIntelligenceDailyDia ref="police"></policeIntelligenceDailyDia>
        <el-dialog :fullscreen="fullscreen" title="警情日报详情" v-model="visible" width="1200px">

            <div class="avue-crud__dialog__menu">
                <img @click="fullscreen = !fullscreen" class="quan" src="@/assets/images/quan.png" alt="">
            </div>
            <el-form :model="search" inline size="default">
                <el-form-item label="联网设备">
                    <el-input v-model="search.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="设备编号">
                    <el-input v-model="search.device_no" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getList" size="mini">搜索</el-button>
                    <el-button type="warning" @click="reset" size="mini">重置</el-button>
                    <el-button type="success" @click="onDownExcel" size="mini">导出</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="list" height="400px">
                <el-table-column label="序号" type="index" width="120"></el-table-column>
                <el-table-column label="联网设备" prop="name"></el-table-column>
                <el-table-column label="设备编号" prop="device_no"></el-table-column>
                <el-table-column label="类型" prop="method_text"></el-table-column>
                <el-table-column label="事件描述" prop="device_remark"> </el-table-column>
                <el-table-column label="时间" prop="create_time"> </el-table-column>
            </el-table>
            <el-pagination style="margin-top: 10px" background v-model:current-page="pagination.page"
                v-model:page-size="pagination.page_size" layout="->,total, sizes, prev, pager, next, jumper"
                :total="total" @current-change="getList" @size-change="getList" />
        </el-dialog>
    </dv-border-box1>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue'
import veEcharts from '../veEcharts.vue'
import echarts from '@/util/echarts'
import { mockDays } from '@/util/utils'
import dayjs from 'dayjs'
import { warnTrend, warnTrendList, warnTrendListExcel } from '@/api/flueClean'
import policeIntelligenceDailyDia from './components/policeIntelligenceDailyDia.vue'
const visible = ref(false)
const list = ref([])
const total = ref(0)
const day = ref('')
const search = reactive({
    name: '',
    device_no: '',
    method: ''
})
const pagination = reactive({
    page: 1,
    page_size: 20
})
const warnChart = ref()
const option1 = reactive({
    color: ['#ff974c', '#00eaff', '#ff4049'],
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0,0,0, 0.5)',
        textStyle: {
            color: '#fff',
            fontFamily: 'myFont'
        }
    },
    legend: {
        show: true,
        icon: 'roundRect',
        textStyle: {
            color: '#fff',
            fontSize: 14,
            padding: [0, 8, 0, 8],
            fontFamily: 'myFont'
        }
    },
    grid: {
        left: '7%',
        right: '6%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: mockDays(6),
        axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
                color: 'rgb(41,188,245)'
            }
        },
        axisTick: {
            show: false,
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#1160a0',
                    type: 'dashed'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#008de7'
                }
            }
        },
        axisLabel: {
            color: '#FFFFFF',
            fontSize: 14,
            fontFamily: 'myFont'
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: true,
            lineStyle: {
                color: '#1160a0',
                type: 'dashed'
            }
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: '#008de7'
            }
        },
        axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 14
        }
    },
    series: [
        {
            name: '监管',
            type: 'line',
            symbol: 'circle',
            data: [200, 632, 1501, 1000, 800, 430]
            //   areaStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: '#ff974c30' },
            //       { offset: 0.6, color: '#ff974c20' },
            //       { offset: 1, color: '#ff974c10' }
            //     ])
            //   }
        },
        {
            name: '故障',
            type: 'line',
            symbol: 'circle',
            data: [320, 332, 301, 334, 390, 330],
            lineStyle: {
                width: 2,
                color: '#00eaff'
            }
            //   areaStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: '#00eaff30' },
            //       { offset: 0.6, color: '#00eaff20' },
            //       { offset: 1, color: '#00eaff10' }
            //     ])
            //   }
        },
        {
            name: '火警',
            type: 'line',
            symbol: 'circle',
            data: [820, 932, 901, 934, 1290, 1330],
            lineStyle: {
                width: 2,
                color: '#ff4049'
            }
            //   areaStyle: {
            //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //       { offset: 0, color: '#ff404930' },
            //       { offset: 0.6, color: '#ff404920' },
            //       { offset: 1, color: '#ff404910' }
            //     ])
            //   }
        }
    ]
})

const police = ref()

const opendiia = () => {
    police.value.open()
}
// 获取数据
const getData = async () => {
    const { data } = await warnTrend({})
    let time = []
    let legendData = []
    let series = []
    let seriesData = []
    for (let key in data) {
        time.push(key)
        for (let item in data[key]) {
            if (legendData.indexOf(item) == -1) {
                legendData.push(item)
                series.push({
                    name: item,
                    type: 'line',
                    showSymbol: false,
                    smooth: true,
                    data: []
                })
            }
        }
        seriesData.push(data[key])
    }
    series.map((item) => {
        seriesData.forEach((item2) => {
            for (const key in item2) {
                if (item.name == key) {
                    item.data.push(item2[key])
                }
            }
        })
    })
    option1.series[0].data = series[0].data || []
    option1.series[1].data = series[1].data || []
    option1.series[2].data = series[2].data || []
}
const reset = () => {
    search.name = ''
    search.device_no = ''

    getList(1)
}
const getList = async (page?) => {
    if (page === 1) pagination.page = 1
    const { data } = await warnTrendList({ date: day.value, ...search, ...pagination })
    list.value = data.data
    total.value = data.total
}
const onDownExcel = () => {
    warnTrendListExcel({ date: day.value }).then((res) => {
        const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })
        if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
    })
}
onMounted(() => {
    getData()
    warnChart.value.chartInstance.getZr().on('click', (params) => {

        if (params.topTarget?.parent?.parent?.__ecComponentInfo?.index === undefined) return
        const pointInPixel = [params.offsetX, params.offsetY]
        const pointInGrid = warnChart.value.chartInstance.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
        const xIndex = pointInGrid[0] //索引
        const type = params.topTarget.parent?.parent?.__ecComponentInfo?.index
        if (type === 0) {
            search.method = '1'
        } else if (type === 1) {
            search.method = '2'
        } else if (type === 2) {
            search.method = '3'
        }
        day.value = dayjs().subtract(xIndex, 'day').format('YYYY-MM-DD')
        visible.value = true
        getList()
    })
})
</script>

<style lang="scss" scoped>
.dv-border-box-1 {
    position: relative;
    font-size: 14px;

    .SelfIcon {
        z-index: 8;
        position: absolute;
        top: 1.6rem;
        right: 2rem;
        color: #6eecee;
        cursor: pointer;
    }

    .title {
        color: #edf4ff;
        height: 20px;
        font-family: 'myFont';
        font-size: 20px;

        img {
            height: 40px;
            margin-top: -4px;
        }
    }

    .tag-wrap {
        display: flex;
        justify-content: end;
        padding: 10px 15px 0;

        .tag {
            background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 280%);
            border: 1px solid #1f99c7;
            border-radius: 10px;
            color: #1f99c7;
            font-size: 12px;
            padding: 2px 4px;
            margin-right: 15px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
                color: #2989f8;
                box-shadow: 0 0 10px rgb(0, 140, 255);
            }
        }

        .active {
            color: #2989f8;
            box-shadow: 0 0 10px rgb(0, 140, 255);
        }
    }

    .line {
        width: 100%;
        height: 300px;
    }
}
</style>
